<template>
  <div>
    <x-header :left-options="{showBack: false}" theme="stable" class="loginHeader">登录界面</x-header>
    <group label-width="4.5em" label-margin-right="0" label-align="left">
      <x-input :required="true" title="工号" type="text" placeholder="必填" v-model="form.userCode"></x-input>
      <x-input :required="true" title="姓名" type="text" placeholder="必填" v-model="form.userName"></x-input>
      <x-input :required="true" title="手机" :max="11" type="tel" placeholder="必填" v-model="form.phone">
        <button slot="right" class="sendCheckCodeBtn" :class="sendCodeClass" @click="getCheckCode">
          <span v-if="!sended">获取验证码</span>
          <span v-if="sended">重新发送（{{timeLast}}）</span>
        </button>
      </x-input>
      <x-input title="验证码" :max="4" type="text" placeholder="必填" v-model="form.verificationCode"></x-input>
    </group>
    <div v-if="promptInfo" style="padding-top:10px;font-size: 12px;padding-left:15px;color:#666">
      <span>没有收到验证码？请再次点击获取</span>
    </div>
    <box gap="10px 10px">
      <x-button type="primary" style="background-color: #4A90E2" @click.native="login">登录</x-button>
    </box>
    <toast v-model="toastShow.show" :type="toastShow.type" :time="toastShow.duration">{{toastShow.txt}}</toast>
  </div>
</template>

<script>
  import {Group, XInput, XHeader, XButton, Box, Toast} from 'Vux'
  export default {
    name: 'HelloWorld',
    components: {
      Group,
      XInput,
      XHeader,
      XButton,
      Box,
      Toast
    },
    data () {
      return {
        form: {
          userCode: '',
          userName: '',
          phone: '',
          verificationCode: ''
        },
        blankForm: ['工号', '姓名', '手机号', '验证码'],
        sendCodeClass: "sended",
        timeLast: 59,
        sended: false,
        promptInfo: false,
        btnTop: "-20px",
        ableSaveFlag: false,
        toastShow: {
          txt: "",
          type: "",
          duration: 1000,
          show: false
        }
      }
    },
    methods: {
      login(){
        if (this.ableSaveFlag) {
          this.$vux.loading.show({
            text:'用户登录中..'
          });
          this.loginPost()
        } else {
          this.toastShow = {
            txt: '请填写' + this.blankForm[0],
            type: "warn",
            duration: 1000,
            show: true
          };
        }
      },
      loginPost(){
        let user = this.form;
        $.post("../api/login", {
          name: user.userName,
          workNumber: user.userCode,
          mobile: user.phone,
          weChatId: this.$store.state.app.weChatCode,
          verificationCode: user.verificationCode
        }, (data) => {
          this.$vux.loading.hide();
          if (data.code === 200) {
            let obj = {
              name: user.userName,
              workNumber: user.userCode,
              mobile: user.phone,
              weChatId: this.$store.state.app.weChatCode,
              verificationCode: user.verificationCode
            };
            this.$store.commit("SAVE_LOGIN_INFO", obj);
            this.$router.push('/home');
          } else {
            this.toastShow = {
              txt: data.data,
              type: "warn",
              duration: 1000,
              show: true
            };
          }
        }, 'json');
      },
      getCodePost(){
        this.sendCodeClass = "sended";
        let user = this.form;
        $.post('../api/checkLoginInfo', {
          name: user.userName,
          workNumber: user.userCode,
          mobile: user.phone,
          weChatId: this.$store.state.app.weChatCode
        }, (data) => {
          if (data.code === 200) {
            this.sended = true;
            this.sendCodeClass = "sended";
            this.toastShow = {
              txt: '验证码已发送',
              type: "text",
              duration: 1000,
              show: true
            };
            let timeLast = 59;
            this.promptInfo = false;
            let timer = setInterval(() => {
              if (timeLast > 0) {
                timeLast -= 1;
                this.timeLast = timeLast;
              } else {
                clearInterval(timer);
                this.sended = false;
                this.sendCodeClass = "sending";
                this.promptInfo = true;
                this.btnTop = "0"
              }
            }, 1000)
          } else {
            this.sendCodeClass = "sending";
            this.toastShow = {
              txt: data.data,
              type: "text",
              duration: 1000,
              show: true
            };
          }
        }, 'json')
      },
      getCheckCode(){
        if (!this.sended && this.sendCodeClass === "sending") {
          this.getCodePost();
        } else {
          return
        }
      }
    },
    watch: {
      form: {
        handler(){
          if (this.form.phone.length === 11 && this.form.userCode !== "" && this.form.userName !== "") {
            this.sendCodeClass = "sending";
          } else {
            this.sendCodeClass = "sended";
          }
          let ary = Object.keys(this.form);
          let flag = false;
          let blankForm = [];
          let formTxts = ['工号', '姓名', '手机号', '验证码'];
          for (let i = 0; i < ary.length; i++) {
            if (this.form[ary[i]] === "") {
              flag = true;
              blankForm.push(formTxts[i])
            }
          }
          this.blankForm = blankForm;
          this.ableSaveFlag = !flag
        },
        deep: true
      }
    },
    mounted(){
    }
  }
</script>
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .sendCheckCodeBtn {
    color: #999;
    vertical-align: middle;
    border: 0;
    padding: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .sending {
    background-color: #fdc900;
    color: white
  }

  .sended {
    background-color: #cdcdcd;
  }

  .loginInput > .von-input > input {
    text-align: left;
  }

  .loginInput > .von-input > input::-webkit-input-placeholder {
    text-align: left;
  }
</style>
